<template>
  <div class="home">
    <div class="welcome-section">
      <h1>组件文档库</h1>
      <p class="description">基于 Vue 2.6.x 和 Element UI 的组件库</p>
      
      <div class="info-cards">
        <el-card class="info-card">
          <div slot="header">
            <span>版本信息</span>
          </div>
          <p>Vue: 2.6.x</p>
          <p>Element UI: 2.15.x</p>
        </el-card>

        <el-card class="info-card">
          <div slot="header">
            <span>浏览器支持</span>
          </div>
          <p>支持 IE7+ 及现代浏览器</p>
        </el-card>
      </div>

      <div class="quick-start">
        <h2>快速开始</h2>
        <p>从左侧菜单选择组件，查看详细文档和示例。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<style lang="scss">
.home {
  padding: 40px;
}

.welcome-section {
  text-align: center;
}

.description {
  font-size: 18px;
  color: #666;
  margin: 20px 0 40px;
}

.info-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
}

.info-card {
  width: 300px;
}

.quick-start {
  margin-top: 40px;
  text-align: left;
  max-width: 800px;
  margin: 40px auto;
}

.quick-start h2 {
  margin-bottom: 20px;
}
</style>